import PageModule from '@/components/PageModule.tsx'
import React, {useEffect, useState} from "react";
import {useSearchParams} from 'react-router-dom';
import {Flex, Upload, Image, Button, Row, Form} from 'antd'
import CustomUpload from '@/components/CustomUpload.tsx'
import {getProductInfo, getSealChannel, queryRootMeun} from '@/axios/apis.ts'
import CycleForm from "@/components/DynamicSearchForm/CycleForm.tsx";
import './product.less'
import {getDicOnCode} from '@/utils/dicAll.ts'
import {queryAllCompany} from "@/axios/apis.ts"

const ProductInfo = ({nextStep}) => {
    const [searchParams] = useSearchParams();
    const uploadTheComponentLsit = [
        {key: 'productIcon', name: '产品图片'},
        {key: 'productFeatures', name: '产品介绍'},
        {key: 'productIcon', name: '产品banner'},
    ]
    const [formFields, setFormFields] = useState<Array<object>>([])
    const [uploadKey, setUploadKey] = useState('')
    const fields = [
        {
            type: 'input',
            name: 'productCode',
            label: '产品编码',
            placeholder: '请选择',
        },
        {
            type: 'select',
            name: 'insuranceCode',
            label: '保险公司',
            placeholder: '请选择',
            options: [],
            fieldNames: {
                label: 'name',
                value: 'companyCode'
            },
        },
        {
            type: 'select',
            name: 'productType',
            label: '产品类型',
            placeholder: '请选择',
            options: getDicOnCode("PRODUCT.TYPE"),
        },
        {
            type: 'select',
            name: 'sealChannelId',
            label: '销售渠道',
            placeholder: '请选择',
            options: [],
        },
        {
            type: 'TreeSelect',
            name: 'recommender',
            label: '推荐单位',
            placeholder: '请选择',
            options: [],
            multiple: true,
            fieldNames: {
                label: 'orgName', value: 'orgCode', children: 'orgChildrenMap'
            },
        },
        {
            type: 'input',
            name: 'minPremium',
            label: '最低保费',
            placeholder: '请输入',
        },
        {
            type: 'input',
            name: 'waitPeriod',
            label: '等待期',
            placeholder: '请输入',
        },
        {
            type: 'input',
            name: 'hesitationPeriod',
            label: '犹豫期',
            placeholder: '请输入',
        },
        {
            type: 'select',
            name: 'share',
            label: '是否选择分享',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        },
        {
            type: 'select',
            name: 'internetFlag',
            label: '互联网标识',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        },
        {
            type: 'TreeSelect',
            name: 'notRecommender',
            label: '不推荐单位',
            placeholder: '请选择',
            options: [],
            multiple: true,
            fieldNames: {
                label: 'orgName', value: 'orgCode', children: 'orgChildrenMap'
            },
        },
        {
            type: 'select',
            name: 'benefit',
            label: '是否显示计划书',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        }, {
            type: 'select',
            name: 'prospectusType',
            label: '请选择计划书分类',
            placeholder: '请选择',
            options: getDicOnCode("PRODUCT.PROSPECTUSTYPE"),
        },
        {
            type: 'select',
            name: 'isH5',
            label: '是否为H5产品',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        },
        {
            type: 'input',
            name: 'h5Url',
            label: 'h5Url',
            placeholder: '请输入',
        },
        {
            type: 'select',
            name: 'isH5Plan',
            label: '是否为H5计划书',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        },
        {
            type: 'input',
            name: 'h5PlanUrl',
            label: 'h5计划书url',
            placeholder: '请输入',
        },
        {
            type: 'select',
            name: 'detail',
            label: '是否显示基本保障和保障详情',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        }, {
            type: 'select',
            name: 'isCheck',
            label: '是否OCR识别',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        },
        {
            type: 'select',
            name: 'signature',
            label: '是否签名',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        },
        {
            type: 'select',
            name: 'jobClass',
            label: '最大职业类别',
            placeholder: '请选择',
            options: [],
        },
        {
            type: 'select',
            name: 'showType',
            label: '是否显示费率因子',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        },
        {
            type: 'select',
            name: 'insureFlag',
            label: '显示立即投保按钮',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        },
        {
            type: 'select',
            name: 'healthInfoFlag',
            label: '是否强制阅读健告',
            placeholder: '请选择',
            options: getDicOnCode("SYS.ISNOT"),
        },
        {
            type: 'input',
            name: 'underwritingDescription',
            label: '承保描述',
            placeholder: '请输入',
        },


    ]
    const [form] = Form.useForm();
    // 获取产品信息
    const getInfo = () => {
        // 获取下拉框数据
        Promise.all([
            queryAllCompany(),
            getSealChannel(),
            queryRootMeun({
                index: "1",
                orgPathList: ["00000000"],
                orgCodeList: ["00000000"],
            }),
        ]).then(res => {
            const [res1, res2, res3] = res
            fields[1].options = res1.data
            fields[3].options = res2.data
            fields[4].options = fields[10].options = res3.data
            setFormFields(fields)
        })
        if (searchParams.get('productId')) {
            getProductInfo({
                id: searchParams.get('productId'),
            }).then(res => {
                if (+res.code === 200) {
                    form.setFieldsValue(res.data)
                }
            })
        }
    }
    useEffect(() => {
        // 初始化
        getInfo()
    }, []);
    // 提交
    const onFinish = (values) => {
        let params = lodash.cloneDeep(values)
        // console.log(params, 'values')
        nextStep()
    }
    // 清空表单
    const handlerEmpty = () => {
        form.resetFields()
    }
    // 获取文件url
    const getFiles = (fileList) => {
        form.setFieldValue(uploadKey, fileList[0]?.url)
    }
    return (
        <PageModule title="基本信息填写">
            <div style={{marginLeft: 150}}>
                <Form
                    onFinish={onFinish}
                    form={form}
                >
                    <Flex gap="middle" wrap>
                        {
                            uploadTheComponentLsit.map((item, index) => {
                                return (
                                    <Form.Item
                                        name={item.key}
                                        label=""
                                    >
                                        <CustomUpload listType="picture-card" getFiles={getFiles} initData={form.getFieldValue(item.key)}>
                                            <Flex vertical="column" align="center" style={{cursor: 'pointer'}}
                                                  onClick={() => {
                                                      setUploadKey(item.key)
                                                  }}>
                                                <img
                                                    src="" />
                                                <span style={{
                                                    fontSize: '12px',
                                                    color: '#606266',
                                                    marginTop: 10
                                                }}>{item.name}</span>
                                            </Flex>
                                        </CustomUpload>
                                    </Form.Item>
                                )
                            })
                        }

                    </Flex>
                    <div style={{margin: '20px 0'}}>仅支持JPG、GIF、JPEG,图片小于100kb</div>
                    <Row className="productInfo">
                        <CycleForm fields={formFields} span={9} />
                    </Row>
                    <Form.Item label={null} className="footer-btn">
                        <Button type="primary" htmlType="submit"> 保存 </Button>
                        <Button onClick={handlerEmpty}> 清空 </Button>
                    </Form.Item>
                </Form>
            </div>

        </PageModule>
    );
};

export default ProductInfo;